<template>
	<view>
		<div class="ipt">
			<input type="text" value="" placeholder="请输入您要搜索的商品" v-model="word" @confirm="search_all"
				@blur="search_all" />
			<!-- <van-button type="default" size="mini" @tap="cancel">取消</van-button> -->
		</div>
		<div class="bossss">
			<div class="lll" v-if="list.length>0 && !words.length">
				历史记录
			</div>
			<div class="sea" v-for="(item,index) in list" :key="index" v-if="list.length>0 && !words.length">
				<div @tap="tap_search(item.word)">{{item.word}}
					<van-icon name="cross" @tap="del(index)" />
				</div>
			</div>
			<!-- dawa -->
			<div class="zzz" v-for="(item,index) in words" :key="index" v-if="words.length>0">
				<div @tap="todetail(item.goods_id)">{{item.goods_name}}</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: wx.getStorageSync('history') || [],
				word: '',
				words: [],
			};
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			async getlist() {
				let {
					data: res
				} = await uni.$http.get("/api/public/v1/goods/qsearch?query=" + this.word)
				console.log(res)
				this.words = res.message
			},
			search_all() {
				var obj = {
					word: this.word
				}
				if (this.word == '') {
					wx.showToast({
						title: '请输入！',
						icon: 'error'
					})
					this.words = []
					return false
				}
				if (this.list.length > 10) {
					this.list.pop()
				}
				this.list.unshift(obj)
				this.getlist()
				wx.setStorageSync('history', this.list)
			},
			todetail(id) {
				wx.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			},
			tap_search(word) {
				wx.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch?query=' + word,
					success: (res) => {
						console.log(res)
						this.words = res.data.message
					}
				})
			},
			del(index) {
				this.list.splice(index, 1)
			},
		}
	}
</script>

<style lang="scss">
	.ipt {
		width: 750rpx;
		height: 100rpx;
		background-color: #eb4450;
		display: flex;
		justify-content: center;
		padding-top: 20rpx;

		input {
			width: 550rpx;
			height: 50rpx;
			border: 1px solid #555555;
			background-color: #EEEEEE;
		}
	}
</style>
